<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>布局定位尺寸</title>
        <style>
        html{
          height: 100%;
          width: 100%;  
          margin: 0;
          padding: 0;  
        }
        body{
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
          overflow: auto;
        }    
        #app {
            display: block; 
            /* position: relative;  static,relative 刚好占满时会出现滚动条 */
            position: absolute; /* 内容刚好占满时不会出现滚动条 */
            border: none;
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            left:0;
            top:0;
            overflow: auto;
        }                
        .at-outer {
            border: none;
            display: block;
            height: 100%;
            width: 100%;
        }
        .bar-head{
            border: solid 1px silver;
            display: flex;
            height: 32px;
            width: 99%;
        }
        .btn-head{
            height: 28px;
            margin: 2px;
        }
        .bodyctx {
            border: solid 1px black;
            position: relative; /* 让内部的元素在 "position: absolute;"时定位以本容器为基准 */
            height: calc(100% - 36px); /* .bar-head的height=32,.bar-head,.bodyctx的border占 2*2*1px */
            width: calc(100% - 2px); /* .bodyctx本身的border占 2*1px */
            overflow: auto; /* 默认为 auto */
        }         
               
        .bps-atouter {
            border: solid 15px green;
            display: block; /* 决定内容布局方式 */
            /* position: relative;  static,relative 刚好占满时会出现滚动条 */
            position: absolute; /* 决定本身定位方式，absolute：内容刚好占满时不会出现滚动条 */
            margin: 20px;
            padding: 30px;
            left:0;
            top:0;
            right:0;
            bottom:0;
            height: calc(100% - 110px); /* 只要边框外沿能全显示，就不会有滚动条 */
            width: calc(100% - 110px);
        }
        .bps-bodyctx {
            border: solid 5px blue;
            height: calc(100% - 10px); /* .bodyctx本身的border占 2*5px */
            width: calc(100% - 10px);  
            position: relative; /* relative是在父文档流中以相对位置定位 */
        }
        .bps-imgbox{
            border: solid 1px silver; 
        }
        .bps-innerbox{
            background-color: aqua;
            border: solid 2px darkblue;
            height: 48%;
            width: 45%;
            position: absolute; /* absolute是相对于父元素按绝对位置定位, left,top,height,width,right,bottom有效 */
            left: 410px;
            top: 48px;
            right: 26px; /* 有宽度则此属性无效 */
            bottom: 12px; /* 有高度则此属性无效 */
            margin: 11px;
            padding: 18px;
            overflow: auto;
        }
        .bds-inincatch{
            background-color: silver;
            border: solid 17px green;
            position: absolute;/* absolute是相对于父元素按绝对位置定位, left,top,height,width,right,bottom有效 */
            left: 0px;
            top: 0px;
            --height: calc(80%-38px);
            --width: calc(80%-38px);
            right: 0px; 
            bottom: 0px; 
            margin: 13px;
            padding: 25px;
        }
        .bds-inincatch2{
            background-color: #a0a0a0;
            border: solid 17px green;
            position: relative;
            /* relative是在父文档流中以相对位置定位, height,width有效,left,top起相对偏移作用,但scroll区还是按原来(无left,top)的 */
            /* absolute是相对于父元素按绝对位置定位, left,top,height,width,right,bottom有效 */
            left: 10px;
            top: 10px;
            height: 100%;
            width: 100%;
            padding: 27px;    
        }
               
        </style>
    </head>
    <body>
    <div id="app">
      <div class="at-outer">
          <div class="bar-head">
              <button class="btn-head" >按钮1</button>
              <button class="btn-head" >按钮2</button>
          </div> 
          <div class="bodyctx" >
              
              <div class="bps-atouter">
                  <div class="bps-bodyctx">
                      <img class="bps-imgbox" src="./PosSize.jpg"></img>
                      <div class="bps-innerbox">
                        padding: 18px; overflow: auto; scroll区按border区域。
                        <div class="bds-inincatch2">
                            padding: 27px; left: 10px; top: 10px;
                        </div>  
                      </div>   
                  </div>      
              </div>
         
          </div>      
      </div> 
    </div>
    </body>
</html>